<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/ku.css">
</head>

<body>
    <div class="bigbox">
        <!-- 头部 -->
        <div class="nav" id="nav">
            <div class="navleft">
                <img src="../img/logonew.png" width="120px" height="45px">
                <ul>
                    <li><a href="../html/index.html">首页</a></li>
                    <li><a href="../html/酷玩.html">酷玩</a></li>
                    <li><a href="#">导购</a></li>
                    <li><a href="../html/试用.html">试用</a></li>
                    <li><a href="../html/报告.html">报告</a></li>
                </ul>
            </div>
            <div class="navright">
                <img src="../img/search.png" alt="">
                <ul>
                    <li><a href="#">注册</a></li>
                </ul>
            </div>
        </div>
        <!-- 发现酷玩 -->
        <div class="tob">
            <div class="tob-p">
                <p>导购清单</p>
            </div>
            <div class="tab">
                <div class="tab_list">
                    <ul class="ul">
                        <li class="current">最新</li>
                        <li>最热</li>
                        <!-- <li>品类</li> -->
                    </ul>
                </div>
                <div class="tab_con">
                    <div class="item" style="display: block;">
                        <!-- 最新 -->
                        <div class="new">

                        </div>
                    </div>
                    <div class="item">
                        <!-- 最热 -->
                        <div class="hot">

                        </div>
                    </div>
                </div>
            </div>
            <div class="load">
                <img src="../img/more.png" alt="">
                点击加载更多
            </div>
                   <!-- 底部 -->
       <div class="bottomnav">
        <img src="../img/code.png" alt="" class="aimg">
        <!-- <img src="../img/logoImg.jpg" alt=""> -->
        <div class="dl">
            <dl>
                <dt><img src="../img/logoImg.jpg" alt=""></dt>
                <dd>全球酷玩试用导购平台<br>
                    酷·新奇·好玩·品质 </dd>
                <dd>微信添加“JguoJguo”<br>
                    获取我们的服务。
                </dd>
            </dl>
            <dl>
                <dt>免费试用</dt>
                <dd>试用流程 </dd>
                <dd>如何提高成功率</dd>
            </dl>
            <dl>
                <dt>友情链接</dt>
                <dd>智东西 WEIBUSI</dd>
                <dd>搜狐IT 腾讯科技</dd>
                <dd>搜狐数码 凤凰科技</dd>
                <dd>凤凰数码 PConline</dd>
                <dd>泡泡网 3W咖啡</dd>
                <dd>ZUK社区 亿觅emie</dd>
                <dd>极客公园 易迅易启玩</dd>
                <dd>果库</dd>
            </dl>
            <dl>
                <dt>购买攻略</dt>
                <dd>美亚海淘教程</dd>
                <dd>日亚海淘教程</dd>
                <dd>海淘转运攻略</dd>
                <dd>kickstarter 众筹购买攻略</dd>
                <dd>indiegogo 众筹购买攻略</dd>
            </dl>
            <dl>
                <dt>厂商合作</dt>
                <dd>关于极果 </dd>
                <dd>联系我们</dd>
                <dd>商务合作：BD@jiguo.com </dd>
                <dd>CEO邮箱：CEO@jiguo.com</dd>
            </dl>
        </div>
        <a href="#nav"><img src="../img/back.png" alt="" class="bimg"></a>
    </div>
        </div>


    </div>
    
</body>

</html>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    $(function () {
        // 1.点击上部的li，当前li 添加current类，其余兄弟移除类
        $(".tab_list li").click(function () {
            // 链式编程操作
            $(this).addClass("current").siblings().removeClass("current");
            // 2.点击的同时，得到当前li 的索引号
            var index = $(this).index();
            console.log(index);
            // 3.让下部里面相应索引号的item显示，其余的item隐藏
            $(".tab_con .item").eq(index).show().siblings().hide();
        });
    });

    // 最新
    $.ajax({
        url: 'http://localhost:3000/guid/new',
        type: 'get',
        success(data) {
               console.log(data)
            var str = ""
                for (var i = 0; i < data.length; i++) {
                    // console.log(index[0].img);
                    str += "<div class=new1>";
                    str += "<img class=newimg src=" + data[i].img + ">";
                    str += "<p >" + data[i].text + "</p>";
                    str += "<span >wods:" + data[i].words + "<span>";
                    str += "<span> like:" + data[i].like + "<span>";
                    str += "</div>"
                }
                $('.new').html(str)
        }
    })


    //最热
    $.ajax({
        url: 'http://localhost:3000/guid/hot',
        type: 'get',
        success(data) {
            // console.log(data);
            var str = ""
                for (var i = 0; i < data.length; i++) {
                    console.log(data[i].price);
                    str += "<div class=new1 >";
                    str += "<img class=newimg src=" + data[i].img + ">";
                    str += "<p>" + data[i].text + "</p>";
                    str += "<span >wods:" + data[i].words + "<span>";
                    str += "<span> like:" + data[i].like + "<span>";
                    str += "</div>"
                }
                $('.hot').html(str)
        }
    })



    /* // 品类
         $.ajax({
            url: 'http://localhost:3000/play/category',
            type: 'get',
            success(data) {
                console.log(data);
                var str = ""
             //    for (var i = 0; i < data.length; i++) {
                 //    str += "<div class=swiper-slide>";
                 //    str += "<img  class=lunboimg src=" + data[i].img + ">";
                 //    str += "<p class=lunp>" + data[i].text + "</p>"
                 //    str += "<span class=lunspan>" + data[i].uName + "<span>";
                 //    str += "</div>"
             //    }
             //    $('.swiper-wrapper').html(str)
             }
        });*/

    $('.load').click(function () {
        // $(".sel2").toggle();  
        // console.log(111)
        if ($(".item").css('height') == '800px') {
            $(".item").css('height', '1050px')
        } else if ($(".item").css('height') == '1050px') {
            $(".item").css('height', '800px')
        }
    })
</script>